<!-- 详情页面 -->
<template>
  <div class="detail-box">
    <div class="top-box">
      <div class="swiper">
        <img :src="detailInfo.GoodsImage"
             alt="">
        <p><span>￥{{detailInfo.SaleAmount}}</span></p>
        <p>{{detailInfo.ClassifyName}}|{{detailInfo.Title}}</p>
      </div>
    </div>
    <div class="address">
      <span class="iconfont icon-ditu"></span>商家地址：苏州市工业园区仁爱路1号
    </div>
    <div class="goods-detail">
      <img v-for="(item,index) in detailInfo.DetailImgList"
           :key="item.Id"
           :src="item"
           alt="">
    </div>
    <div class="toolbar-box">
      <div class="toolbar">
        <div class="left">
          <a href="#/main">
            <span class="iconfont icon-home"></span>
            <p>店铺</p>
          </a>
        </div>
        <div class="left">
          <a href="tel:0512-10086">
            <span class="iconfont icon-weixin"></span>
            <p>咨询</p>
          </a>
        </div>
        <div class="left">
          <a href="#/main/mycart">
            <span class="iconfont icon-card"></span>
            <p>购物车</p>
          </a>
        </div>
        <div class="add-card right"
             @click="addCart">
          <p>加入购物车</p>
        </div>
        <div class="go-buy right"
             @click="goBuy">
          <p>立即购买</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRandomCode } from '@/libs/common'
import { domain } from '@/api/sys-config.js'
export default {
  data () {
    return {
      detailInfo: {}
    };
  },

  components: {},

  computed: {},

  created () { },

  mounted () {
    this.getGoodsList()

  },

  methods: {
    //点击加入购物车
    addCart () {
      let self = this
      axios.post(`${domain}/api/miniapps/addCart`, {
        goodsId: self.detailInfo.GoodsNo,
        quantity: 1,
        shopId: self.detailInfo.ShopId,
        userId: "32977168",
        dataStatus: self.detailInfo.DataStatus
      }).then((response) => {
        self.$toast("加入成功！");
        console.log(response)
      }).catch((error) => {
        console.log(error)
      })
    },
    //点击立即购买
    goBuy () {
      let self = this
      axios.post(`${domain}/api/miniapps/submitOrder`, {
        UserId: "32977168",
        OrderNo: getRandomCode(8),
        BuyUser: "yonxin",
        BuyPhone: "15850217240",
        BuyAddr: "苏州市工业园区仁爱路1号",
        GoodsNo: self.detailInfo.GoodsNo,
        GoodsName: self.detailInfo.Title,
        Num: 1,
        AmountTotal: self.detailInfo.SaleAmount,
        RealAmountTotal: self.detailInfo.SaleAmount,
        ShopId: "1",
        ShopName: "忠犬八公",
        ShopPhone: "15850217240",
        DataStatus: 1,
        OrderStatus: 2,
        FlowNo: "0000001"
      }).then((response) => {
        let res = response.data
        if (res && res.success) {
          self.$router.push({
            path: "/main/order"
          })
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    //获取商品列表
    getGoodsList () {
      let self = this;
      self.goodsNo = this.$route.query.goodsNo
      axios.get(`${domain}/api/miniapps/getWXGoodsInfo`, {
        params: {
          goodsNo: self.goodsNo
        }
      }).then(function (response) {
        //  console.log(response);
        let res = response.data;
        if (res && res.success) {
          self.detailInfo = res.data;
        }

      }).catch(function (error) {
        console.log(error);
      });
    }
  }
}

</script>
<style lang='scss' scoped>
@import "@/assets/scss/base.scss";
.detail-box {
  .top-box {
    background: $white;
    padding: 0 0 15px;
    img {
      width: 100%;
    }
    p {
      height: 24px;
      line-height: 24px;
      padding: 0 15px;
      font-size: 14px;
      span {
        font-size: 18px;
        color: $deepyellow;
      }
    }
  }
  .address {
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    .iconfont {
      font-size: 16px;
    }
  }
  .goods-detail {
    background: $white;
    padding: 10px 10px 70px;
    img {
      width: 100%;
      display: block;
    }
  }
  .toolbar-box {
    position: fixed;
    left: 0;
    bottom: 0;
    background: $white;
    width: 100%;
  }
  .toolbar {
    display: flex;
    height: 60px;
    font-size: 14px;
    .left {
      text-align: center;
      flex: 0.6;
      a {
        color: $deepgrey;
      }
    }
    .right {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      background: $deepyellow;
      color: $white;
    }
    .add-card {
      background: $yellow;
    }
    .go-buy {
      background: $deepyellow;
    }
  }
  .iconfont {
    font-size: 22px;
  }
}
</style>